import React, { Component } from 'react'
import { Result,List, WhiteSpace,Modal } from 'antd-mobile';
import './index.css';
import BrowserCookies from "browser-cookies";
import { connect } from "react-redux";
import outLogin from "../../redux/reducer";

import { loadUseinfoData } from '../../redux/reducers/user.reducer.js';

const alert = Modal.alert;
class My extends Component {
    constructor(props){
        super(props);
        this.outClick = this.outClick.bind(this);
    }
    render() {
        const Item = List.Item;
        const Brief = Item.Brief;
        return (
                this.props.user.avatar?
                <div>
                    <Result
                        img = {<img src={require(`../../assets/img/${this.props.user.avatar}.png`)} alt=''/>}
                        title= {this.props.user.name}
                        message={this.props.user.type==='boss'?<div>公司：{this.props.user.company} </div>:''}
                    />
                    <List renderHeader={() => '个人简介'}>
                        {this.props.user.type==='jobhunter'?
                        <Item multipleLine className="my-list">
                            应聘岗位：{this.props.user.position}
                            <Brief>自我描述：{this.props.user.desc}</Brief>
                        </Item>:''}
                        {this.props.user.type==='boss'?
                        <Item multipleLine className="my-list">
                            在招职位：{this.props.user.position}
                            <Brief>薪资：{this.props.user.paymoney}</Brief>
                            <Brief>要求：{this.props.user.ask}</Brief>
                        </Item>:''}
                    </List>
                    <WhiteSpace></WhiteSpace>
                    <List>
                        <div className="out_box">
                            <Item onClick={this.outClick} className="out">退出登录</Item>
                        </div>
                    </List>
                </div>:<div className='null_user'>暂无信息</div>
        )
    }

    componentDidMount(){
        this.props.loadUseinfoData();
    }

    outClick(){
        alert('退出登录', '您将要退出，是否确定？', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>  {
                BrowserCookies.erase('COOKIEID')
                window.location.href = window.location.href
                this.porops.outLogin();
            } },
          ])  
    }
}

const mapStateToProps = (state,props) => {
    return {
        user:state.userReducer
    }
}

export default connect(mapStateToProps,
    { outLogin, loadUseinfoData}
    )(My);